import React from 'react';
import { Descriptions, Form, Input, Radio, Checkbox, Select, Button } from 'antd';
import { connect } from 'dva';

import styles from './index.less';

const { Option } = Select;
const { TextArea } = Input;
/**
 *  登录界面
 */
@connect(({ loading }) => ({
  //控制状态，绑定事件
  submitting: loading.effects['login/doLogin']
}))
@Form.create()
class Approved extends React.Component {
  state = {
    value: 1
  };
  handleChange(value) {
    console.log(`selected ${value}`);
  }
  handleSubmit() {}
  onChange = e => {
    console.log('radio checked', e.target.value);
    this.setState({
      value: e.target.value
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };
    const optionsWithDisabled = [
      { label: 'Apple', value: 'Apple' },
      { label: 'Pear', value: 'Pear' },
      { label: 'Orange', value: 'Orange', disabled: false }
    ];
    return (
      <div className={styles.approved}>
        <h3>Return number:2212405547</h3>
        <div className={styles.info}>
          <div className={styles.infoItem}>
            <div className={styles.name}>Order number</div>
            <div className={styles.txt}>2212405547</div>
          </div>
          <div className={styles.infoItem}>
            <div className={styles.name}>Approval dealine</div>
            <div className={styles.txt}>2212405547</div>
          </div>
          <div className={styles.infoItem}>
            <div className={styles.name}>Status</div>
            <div className={styles.txt}>2212405547</div>
          </div>
          <div className={styles.infoItem}>
            <div className={styles.name}>Approved by</div>
            <div className={styles.txt}>2212405547</div>
          </div>
        </div>
        <div className={styles.company}>
          <div className={styles.name}>Company</div>
          <div className={styles.text}>ABC Furniture Company</div>
        </div>
        <div className={styles.product}>
          <div className={styles.title}>Product</div>
          <div className={styles.content}>
            <img src="" className={styles.poster} alt="" />
            <div className={styles.detail}>
              <div className={styles.text}>Lucia sofa-Beige color</div>
              <div className={styles.text}>LIH283HG76</div>
              <div className={styles.tips}>3-sSeats 88 in</div>
            </div>
          </div>
        </div>
        <Descriptions column={1}>
          <Descriptions.Item label="Estimated Refund">$1600.00</Descriptions.Item>
          <Descriptions.Item label="Order payment">$1600.00</Descriptions.Item>
          <Descriptions.Item label="Standard Delivery charge">$1600.00</Descriptions.Item>
          <Descriptions.Item label="Return cost">$1600.00</Descriptions.Item>
        </Descriptions>
        <Descriptions title="Contact information" column={1}>
          <Descriptions.Item label="Name">Zhou Maomao</Descriptions.Item>
          <Descriptions.Item label="Contact number">1810000000</Descriptions.Item>
          <Descriptions.Item label="Email">empty</Descriptions.Item>
          <Descriptions.Item label="Address">
            No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
          </Descriptions.Item>
        </Descriptions>
        <div className={styles.reason}>
          <h3>Reason for Return</h3>
          <div className={styles.text}>-Looks different to image on site</div>
          <div className={styles.text}>-Arrivedtoo late</div>
        </div>
        <div className={styles.photos}>
          <div className={styles.imgList}>
            <div className={styles}>
              <img src="" alt="" className={styles.imgItem} />
              <div className={styles.imgName}>Front</div>
            </div>
            <div className={styles}>
              <img src="" alt="" className={styles.imgItem} />
              <div className={styles.imgName}>Front</div>
            </div>
          </div>
        </div>
        <Form {...formItemLayout} onSubmit={this.handleSubmit}>
          <Form.Item label="IOtem condition">
            {getFieldDecorator(
              'email',
              {}
            )(
              <Select defaultValue="lucy" style={{ width: 200 }} onChange={this.handleChange}>
                <Option value="jack">Jack</Option>
                <Option value="lucy">Lucy</Option>
                <Option value="disabled" disabled>
                  Disabled
                </Option>
                <Option value="Yiminghe">yiminghe</Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item label="With original package">
            {getFieldDecorator(
              'package',
              {}
            )(
              <Radio.Group onChange={this.onChange} value={this.state.value}>
                <Radio value={1}>A</Radio>
                <Radio value={2}>B</Radio>
              </Radio.Group>
            )}
          </Form.Item>
          <Form.Item label="IOtem condition">
            {getFieldDecorator('email', {})(<Checkbox>Need to pay for the packing</Checkbox>)}
          </Form.Item>
          <Form.Item label="Payment amount">{getFieldDecorator('amount', {})(<Input prefix="$" />)}</Form.Item>
          <Form.Item label="IOtem condition">
            {getFieldDecorator('email', {})(<Checkbox>No pay for the packing</Checkbox>)}
          </Form.Item>
          <Form.Item label="Where the goods are damaged">
            {getFieldDecorator(
              'damaged',
              {}
            )(
              <Radio.Group onChange={this.onChange} value={this.state.value}>
                <Radio value={1}>A</Radio>
                <Radio value={2}>B</Radio>
              </Radio.Group>
            )}
          </Form.Item>
          <Form.Item label="Refund">
            {getFieldDecorator(
              'refund',
              {}
            )(
              <div className={styles.refund}>
                <Input prefix="$" />
                of the goods value
              </div>
            )}
          </Form.Item>
          <Form.Item label="IOtem condition">
            {getFieldDecorator(
              'email',
              {}
            )(
              <Checkbox.Group
                options={optionsWithDisabled}
                defaultValue={['Apple']}
                // onChange={this.onChange}
              />
            )}
          </Form.Item>
          <Form.Item label="">{getFieldDecorator('trextArea', {})(<TextArea rows={4} />)}</Form.Item>

          <Form.Item className={styles.btnList}>
            <Button htmlType="submit" className={styles.formBtn}>
              Reject
            </Button>
            <Button htmlType="submit" className={styles.formBtn}>
              Approve
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
export default Approved;
